<template>
  <div>
    父组件
    <my-table :data="persons">
      <!-- 旧的写法，这个就是在element-ui中table上看到的，template它是语法组成部分
        slot-scope这个名字是固定的，scope一般也叫这个名字，如果你想拿到子组件中传递过来的每一行值
        要通过scope.row
       -->
      <template slot-scope="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'blue' : 'green' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    <hr />
    <my-table :data="persons">
      <template slot-scope="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'red' : '#999' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    <hr />
    <my-table :data="persons">
      <!-- 新的写法 #默认插槽="scope" scope还是获取子组件值的 -->
      <template #default="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'purple' : 'pink' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    <hr />
    <!-- 替换名字叫second -->
    <my-table :data="kings">
      <!-- <template #default="scope">
        <span
          :style="{ color: scope.row.tag === '家' ? 'purple' : 'pink' }"
        ></span>
      </template>
      <template #first="scope">
        <span
          :style="{ color: scope.row.tag === '家' ? 'purple' : 'pink' }"
        ></span>
      </template> -->

      <!-- 新的写法 #默认插槽="scope" scope还是获取子组件值的 -->
      <!-- <template #second="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'purple' : 'pink' }">{{
          scope.row.tag
        }}</span>
      </template> -->
    </my-table>
  </div>
</template>

<script>
import myTable from './my-table'
export default {
  data () {
    return {
      persons: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }
      ],
      kings: [
        {
          date: '2016-04-01',
          name: '鹏鹏',
          address: '贵州铜仁',
          tag: '家'
        },
        {
          date: '2016-04-03',
          name: '阿扬',
          address: '福建泉州',
          tag: '公司'
        }
      ]
    }
  },
  components: {
    myTable
  }
}
</script>
